﻿﻿@{
    ViewBag.Title = "Todos";
}
<a href="~/Home/About">Customers</a>
<a href="~/Home/Contact">Rock</a>
<div id="ng-app" ng-app="app">
    <div class="container">
        <div class="row">
            <h2>
                Todo</h2>
            <div ng-controller="TodoCtrl">
                <span>{{remaining()}} of {{todos.length}} remaining</span> [ <a href="" ng-click="archive()">
                    archive</a> ]
                <p>
                    Search:
                    <input ng-model="search"></p>
                <ul class="unstyled">
                    <li ng-repeat="todo in todos  | filter:search">
                        <input type="checkbox" ng-model="todo.Done">
                        <span class="done-{{todo.Done}}">{{todo.description}}</span> </li>
                </ul>
                <form ng-submit="addTodo()">
                <div class="controls">
                    <div class="input-append">
                        <input type="text" ng-model="todoText" placeholder="add new todo here">
                        <button class="btn" type="submit">
                            Add</button>
                    </div>
                </div>
                </form>
            </div>
            <div ng-controller="timerCtrl">
                {{seconds}} seconds passed.
            </div>
        </div>
    </div>
    <!-- 1. ng-file-drop | ng-file-drop="options" -->
    <div ng-controller="UploadController" ng-file-drop>
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <h3>
                        Select files</h3>
                    <div ng-show="uploader.isHTML5">
                        <!-- 3. ng-file-over | ng-file-over="className" -->
                        <div class="well my-drop-zone" ng-file-over>
                            Base drop zone
                        </div>
                    </div>
                    <!-- 2. ng-file-select | ng-file-select="options" -->
                </div>
                <div class="col-md-9" style="margin-bottom: 40px">
                    <p>
                        Queue length: {{ uploader.queue.length }}</p>
                    <table class="table">
                        <thead>
                            <tr>
                                <th width="50%">
                                    Name
                                </th>
                                <th ng-show="uploader.isHTML5">
                                    Size
                                </th>
                                <th ng-show="uploader.isHTML5">
                                    Progress
                                </th>
                                <th>
                                    Status
                                </th>
                                <th>
                                    Actions
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="item in uploader.queue">
                                <td>
                                    <strong>{{ item.file.name }}</strong>
                                    <!-- Image preview -->
                                    <!--auto height-->
                                    <!--<div ng-thumb="{ file: item.file, width: 100 }"></div>-->
                                    <!--auto width-->
                                    <div ng-show="uploader.isHTML5" ng-thumb="{ file: item.file, height: 100 }">
                                    </div>
                                    <!--fixed width and height -->
                                    <!--<div ng-thumb="{ file: item.file, width: 100, height: 100 }"></div>-->
                                </td>
                                <td ng-show="uploader.isHTML5" nowrap>
                                    {{ item.file.size/1024/1024|number:2 }} MB
                                </td>
                                <td ng-show="uploader.isHTML5">
                                    <div class="progress" style="margin-bottom: 0;">
                                        <div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }">
                                        </div>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span><span
                                        ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                                    <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
                                </td>
                                <td nowrap>
                                    <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isUploading || item.isSuccess">
                                        <span class="glyphicon glyphicon-upload"></span>Upload
                                    </button>
                                    <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading  || item.isSuccess">
                                        <span class="glyphicon glyphicon-ban-circle"></span>Cancel
                                    </button>
                                    <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
                                        <span class="glyphicon glyphicon-trash"></span>Remove
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <input ng-file-select type="file" ng-disabled="uploader.queue.length>=1" class="btn btn-success btn-xs" />
                </div>
            </div>
        </div>
    </div>
</div>
@section scripts
{
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <script src="~/Scripts/angular-file-upload.js"></script>
    <script src="~/app/controllers/index/helper.js"></script>
    <script src="~/app/controllers/index/TodoCtrl.js"></script>
    <script src="~/app/controllers/index/UploadCtrl.js"></script>
    <script src="~/app/directives/index/upload-directives.js"></script>
}
